import { NavBar, DatePicker } from 'antd-mobile'
import { useEffect, useMemo, useState } from 'react';
import classNames from 'classnames';
import DailyBill from "./components/index"
import dayjs from 'dayjs';
import './index.scss'
import { useSelector } from 'react-redux';
import _ from "lodash"
const Month = () => {
    const { billList } = useSelector(state => state.bill); 
    const [visibleShow, setvisibleShow] = useState(false);
    const [timeVal,setTimeVal] = useState(() => dayjs().format("YYYY-MM"));
    const monthGroup = useMemo(() => {
        return _.groupBy(billList,(item) => dayjs(item.date).format('YYYY-MM' ))
    },[billList])
   const [monthList,setMonthList] = useState([]);
   const result  =  useMemo(()=>{
      const pay = monthList.filter(item => item.type === 'pay').reduce((a,c) => a + c.money,0)
      const income = monthList.filter(item => item.type === 'income').reduce((a,c) => a + c.money,0)
      return {
        pay,
        income,
        total : pay + income
      }
    },[monthList])
   
    // 初始化数据
    useEffect(()=>{
        const nowMonth = dayjs().format("YYYY-MM");
        if(monthGroup[nowMonth]){
            setMonthList(monthGroup[nowMonth])
        }
    },[monthGroup])

    // 当前日 进行分组
    const dayGroup = useMemo(() => {
        const getDatas = _.groupBy(monthList,(item) => dayjs(item.date).format('YYYY-MM-DD' ));
        const keys = Object.keys(getDatas);
        return {
            getDatas,
            keys
        }
    },[monthList])
    return (
      <div className="monthlyBill">
        <NavBar className="nav" backArrow={false}>
          月度收支
        </NavBar>
        <div className="content">
          <div className="header">
            {/* 时间切换区域 */}
            <div className="date" onClick={() => setvisibleShow(true)}>
              <span className="text">
                 {dayjs(timeVal).format('YYYY')} | {dayjs(timeVal).format('M')}月账单
              </span>
              <span className={classNames('arrow' , visibleShow && 'expand')} ></span>
            </div>
            {/* 统计区域 */}
            <div className='twoLineOverview'>
              <div className="item">
                <span className="money">{result.pay}</span>
                <span className="type">支出</span>
              </div>
              <div className="item">
                <span className="money">{result.income}</span>
                <span className="type">收入</span>
              </div>
              <div className="item">
                <span className="money">{result.total}</span>
                <span className="type">结余</span>
              </div>
            </div>
            {/* 时间选择器 */}
            <DatePicker
              className="kaDate"
              title="记账日期"
              precision="month"
              visible={visibleShow}
              onClose={() => {
                setvisibleShow(false)
              }}
              onConfirm={val => {
                  setTimeVal(val)
                  const mon = dayjs(val).format("YYYY-MM");
                  setMonthList(monthGroup[mon] || [])
              }}
              max={new Date()}
            />
          </div>
          {/* 单日列表统计 */}
          {
            dayGroup.keys.map((key,index) => <DailyBill key={index} date={key} billList={dayGroup.getDatas[key]}></DailyBill>)
          }
          
        </div>
      </div >
    )
  }

  export default Month
  
